<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" style="color: red; font-size: 20px">
      hello {{msgOrObj}}
      <my-button></my-button>
    </div>
    <script src="dist/vue.js"></script>

    <script>
      Vue.component("my-button", {
        template: `<button>我的按钮</button>`,
      });
      Vue.mixin({
        created() {
          console.log("created mixin");
        },
      });
      // Vue.mixin({
      //   created() {
      //     console.log("created mixin1");
      //   },
      // });
      let vm = new Vue({
        el: "#app",
        data() {
          return {
            msg: "zzzz",
            obj: "asdasd",
          };
        },
        watch: {
          // obj: {
          //   handler() {
          //     console.log("data1 watch11111111111111111");
          //   },
          //   immediate: true,
          // },
        },
        computed: {
          msgOrObj() {
            console.log("computed");
            return this.obj + this.msg;
          },
        },
        components: {
          "my-button": {
            template: `<div>asdasd</div>`,
          },
        },
      });
      setTimeout(() => {
        //   // vm.data1 = "123";
        vm.msg = "撒大";
        console.log(vm.msgOrObj);
        //   vm.obj = "张三";
        //   // vm.cc.c = "2";
        //   // vm.arr.push(4);
        //   // vm.$nextTick(() => {
        //   //   console.log(vm.$el.innerHTML);
        //   // });
      }, 1000);
      console.log(vm.msgOrObj);
    </script>
  </body>
</html>
